<template>
  <div class="unit-block home-section pt-63px pb-72px">
    <div class="home-title">联盟单位</div>
    <div class="units flex flex-wrap justify-center mt-45px mb-48px mx-150px">
      <img
        v-for="unit in unitList"
        :key="unit.id"
        :src="unit.linkPicUrl"
        class="w-200px h-84px mb-24px mr-20px"
        :class="{ 'cursor-pointer': unit.openUrl }"
        @click="openLink(unit.openUrl)"
      />
    </div>
  </div>
</template>

<script setup>
import { useConfigStore } from "@/store";

const configStore = useConfigStore();
const unitList = computed(
  () => configStore.configList?.unitList.slice(0, 12) || []
);

const openLink = (url) => {
  if (!url) return;
  window.open(url);
};
</script>

<style lang="less" scoped>
.unit-block {
  background: @bg-color;

  .home-title {
    font-size: 32px;
    text-align: center;
    margin-bottom: 45px;
  }

  .units {
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 45px auto 48px;
  }

  img {
    transition: all 0.3s ease;
    cursor: pointer;
  }
}

/* Desktop styles */
@media screen and (min-width: 769px) {
  .home-title {
    font-size: 32px;
  }

  .units {
    margin: 45px 150px;
  }

  img {
    width: 200px;
    height: 84px;
    margin-right: 20px;
    margin-bottom: 24px;
  }
}


@media screen and (max-width: 768px) {
  .unit-block{
    .home-title {
      font-size: 24px;
    }

  }
  .units {
    margin: 45px 16px;
  }

  img {
    width: 120px;
    height: 50px;
    margin-right: 12px;
    margin-bottom: 16px;
  }
}
</style>


